<script setup>
import {UserFilled, Lock} from "@element-plus/icons-vue";
import {reactive, ref} from "vue";
import {loginFn} from "@/api/login.js";
// 获取el-form表单DOM元素
const ruleFormRefLogin = ref(null)
// 登录
const login = () => {
  ruleFormRefLogin.value.validate(async (valid) => {
    if (!valid) {
      return
    }
    const res = await loginFn(ruleFormLogin)
    console.log("请求结果为：" + res)
  })
}
//定义用户名和密码数据源，reactive定义为响应式数据
const ruleFormLogin = reactive({
  username: '',
  password: ''
})
//定义用户名和密码验证规则
const rulesLogin = {
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'}
  ]
}
</script>

<template>
  <div style="height: 100%">
    <el-row style="height: 100%;background: #1AA094;">
      <!--:lg-大屏幕 :md-中等屏幕 设置在哪种屏幕上占多少列,ElementPlus默认把屏幕分成24份，这里大屏幕16分，中12份-->
      <el-col :lg="16" :md="12" class="col_left">
        <h1>Vue3管理系统</h1>
        <span>技术支持</span>
      </el-col>
      <el-col :lg="8" :md="12" class="col_right">
        <!--登录表单-->
        <h1>登录</h1>
        <!-- ref-获取表单DOM元素，"model-设置用户名和密码的数据源，:rules-用于验证规则-->
        <el-form class="login-form"
                 ref="ruleFormRefLogin"
                 :model="ruleFormLogin"
                 :rules="rulesLogin">
          <el-form-item prop="username">
            <el-input v-model="ruleFormLogin.username" placeholder="请输入用户名">
              <template #prefix>
                <el-icon>
                  <UserFilled/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="ruleFormLogin.password" placeholder="请输入密码">
              <template #prefix>
                <el-icon>
                  <Lock/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="login">登录</el-button>
      </el-col>
    </el-row>
  </div>

</template>

<style lang="less" scoped>
.col_left {
  color: #ffffff;
  display: flex; // 弹性布局
  align-items: center; // 垂直居中
  justify-content: center; //水平居中
  flex-direction: column; //将flex方向修改成垂直方向
}

.col_right {
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .login-form {
    width: 240px;
  }
}

.el-button {
  width: 240px;
  background: #1AA094;
}
</style>